import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import conn from './api/conn'
import router from './router'
import store from './store'
import { merge } from './utils/config'
import utils from './utils' // , { constant }
import regComponents from './components'
import './assets/css/base.scss'
// 注册svg图标
import './components/icons/icon'
import 'flex.css/dist/data-flex.css'
import directives from './utils/directives'
// 引入登陆模块
import Login from './views/main/Login'
import UserIcon from './views/main/UserIcon.vue'

const install = function (Vue, options) {
  if (install.installed) return
  const { ui, components, http = {}, ...other } = options
  merge({ ...other, components, forceMultiTab: ui.forceMultiTab })
  Vue.config.productionTip = false
  Vue.use(Element, ui)
  Vue.use(regComponents, components)
  Vue.use(utils)
  Vue.use(conn, http)
  Vue.use(directives)
  app = new Vue({
    router,
    store, // 根实例态存储，子组件通过this.$store访问
    render: h => h(App) // App组件渲染，h即是vm.$createElement,便是在vm._render阶段
  }).$mount('#app')
}
// 兼容直接浏览器引用js文件使用
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export let app = null

export default install(Vue, {
  ui: { size: 'small', forceMultiTab: process.env.VUE_APP_MULTI_TAB },
  components: {
    login: Login, // 登录页面
    // title: Logo, // 网站标题
    // nav: Logo, // 网站导航部分扩展
    // home: Home, // 首页
    userIcon: UserIcon// 用户图标组件
  },
  actions: {
    login: 'system/login', // 登录的action
    captcha: 'system/captcha', // 获取验证码的action
    logout: 'system/logout', // 退出的action
    userInfo: 'system/getUserInfo' // 获取用户信息
  },
  http: {
    baseURL: process.env.VUE_APP_BASE_URL,
    successCode: [0, 200],
    needLoginCode: 4015,
    requestHandler (config) {
      config.headers['X-Access-Token'] = localStorage.getItem('token') || ''
      config.headers['web-client-type'] = 'web'
      config.headers.from = 'app'
      config.statusName = 'code'
      config.messageName = 'message'
      config.successCode = 'success'
      return config
    }
  },
  // 主框架初始化数据的时候执行，如果返回promise，会加入到框架初始化的promise同步执行
  beforeCreated: () => {
    // console.log('beforeCreated')
  },
  // 主框架数据初始化后执行
  afterCreated: () => {
    // console.log('afterCreated')
  }
})
